<template>
	<view class="zh-u-tags" :class="props.class" :style="tagsStyle">
		<text>{{ props.value }}</text>
	</view>
</template>

<script setup lang="ts">
	const props = withDefaults(defineProps<{
		class?: string
		value?: string
		paddingx?: string
		height?: string
		color?: string
		fontSize?: string
		radiusSize?: string
		bgColor?: string
		border?: string
	}>(), {
		height:'0'
	}) 
	
	const tagsStyle = {
		'padding': `0 ${uni.upx2px(Number(props.paddingx))}px`,
		'height': uni.upx2px(Number(props.height)) + 'px',
		'line-height': uni.upx2px(Number(props.height)) + 'px',
		'background-color':props.bgColor,
		'color':props.color,
		'font-size': uni.upx2px(Number(props.fontSize))  + 'px',
		'border':'none',
		'border-radius':uni.upx2px(Number(props.radiusSize))   + 'px'
	}
	if(props.border !== 'none') tagsStyle.border =  `1rpx solid ${props.color}`
	
</script>

<style lang="scss" scoped>
	.zh-u-tags {
		text-align:center;
		display:inline-block;
	}
</style>